<template>
    <a-drawer
        v-model:open="open"
        :title="id != undefined ? '修改文档' : '新建文档'"
        placement="right"
        :width="1156"
        :getContainer="getContainer"
        :maskClosable="false"
    >
        <div class="page">
            <a-row>
                <a-col>
                    <a-form
                        layout="vertical"
                        :rules="rules"
                        :model="helpArticle"
                        autocomplete="off"
                        ref="formRef"
                    >
                        <a-form-item label="文档名称" name="title">
                            <a-input
                                show-count
                                :maxlength="20"
                                placeholder="请输入"
                                v-model:value="helpArticle.title"
                                :style="{ width: '800px' }"
                            />
                        </a-form-item>
                        <a-form-item
                            label="展示权重（数字越大，代表权重越高，在业务端展示的位置越靠前）"
                            name="sort"
                        >
                            <a-input-number
                                placeholder="请输入"
                                v-model:value="helpArticle.sort"
                                :style="{ width: '800px' }"
                                :min="1"
                            />
                        </a-form-item>
                        <a-form-item
                            label="状态"
                            name="status"
                            v-if="id != undefined"
                        >
                            <a-radio-group v-model:value="helpArticle.status">
                                <a-radio :value="1">正常</a-radio>
                                <a-radio :value="98">停用</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item label="文档内容" name="content">
                            <Tinymce
                                v-model="helpArticle.content"
                                oss-folder="tx/helpDocument/"
                                :init="{ width: 1108, height: 650 }"
                            />
                        </a-form-item>

                        <!-- <div class="form-page-btns">
                            <a-button
                                type="primary"
                                @click="hdlSubmit"
                                :loading="pageLoading"
                            >
                                确定
                            </a-button>
                            <a-popconfirm
                                title="未保存当前内容，请确认是否离开?"
                                @confirm="$router.back()"
                                class="popconfirm-box"
                            >
                                <a-button typ="default"> 取消 </a-button>
                            </a-popconfirm>
                        </div> -->
                    </a-form>
                </a-col>
            </a-row>
            <a-spin
                class="page-loading"
                :class="{ active: pageLoading }"
                size="large"
            />
        </div>
        <template #footer>
            <div class="btns">
                <a-button type="primary" ghost @click="openCancel = true">
                    取消
                </a-button>
                <a-button
                    type="primary"
                    @click="hdlSubmit"
                    :loading="pageLoading"
                >
                    确定
                </a-button>
            </div>
        </template>
    </a-drawer>
    <a-modal
        v-model:open="openCancel"
        title="离开确认"
        :getContainer="getContainer"
        @ok="hdlCancel"
    >
        <div>未保存当前内容，请确认是否离开？</div>
    </a-modal>
</template>

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import Tinymce from "@/components/Tinymce/Tinymce.vue";
    import helpArticleManageService from "@/service/helpArticleManage.service";
    import getRuleByName from "@/utils/formRules";
    import { Rule } from "ant-design-vue/es/form";
    import { HelpArticle } from "@/type/helpArticleManage";
    import { message } from "ant-design-vue";
    import { useRoute, useRouter } from "vue-router";

    const emit = defineEmits(["onSuccess"]);

    const open = ref(false);
    const openCancel = ref(false);

    const router = useRouter();
    let id: any = undefined;

    const toggleOpen = (itemId: any) => {
        if (!open.value) {
            id = itemId;
            init();
        }
        open.value = !open.value;
    };
    const init = async () => {
        if (id) {
            pageLoading.value = true;
            try {
                let res = await helpArticleManageService.detail(id);
                let data = res.data.result.data || {};
                helpArticle.value = data;
            } finally {
                pageLoading.value = false;
            }
        }
    };
    const helpArticle = ref(new HelpArticle());
    const rules: Record<string, Rule[]> = {
        title: getRuleByName("required", "请输入文档标题"),
        sort: getRuleByName("required", "请输入权重"),
        status: getRuleByName("required", "请选择状态"),
        content: getRuleByName("required", "请输入文档内容"),
    };
    const formRef = ref();
    const pageLoading = ref(false);
    const hdlSubmit = async () => {
        formRef.value.validate().then(async () => {
            if (pageLoading.value) {
                return;
            }
            pageLoading.value = true;
            try {
                if (id != undefined) {
                    let res = await helpArticleManageService.edit(
                        helpArticle.value,
                    );
                } else {
                    let res = await helpArticleManageService.add(
                        helpArticle.value,
                    );
                }
                message.success("保存成功");
                open.value = false;
                emit("onSuccess");
            } finally {
                pageLoading.value = false;
            }
        });
    };
    const hdlCancel = () => {
        openCancel.value = false;
        open.value = false;
        helpArticle.value = new HelpArticle();
        formRef.value && formRef.value.clearValidate();
    };

    const getContainer = () => {
        return document.querySelector(".help-article-page");
    };

    defineExpose({ toggleOpen });
</script>

<style lang="scss" scoped src="./HelpArticleManageEdit.scss"></style>
